<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="1000px"
    @close="closeDialog"
  >
    <el-form class="demo-form-inline" :inline="true" :model="state.form">
      <el-row>
        <el-col :span="8">
          <el-form-item label="部位编码">
            <el-input v-model="state.form.partCode" placeholder="部位编码" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="部位名称">
            <el-input v-model="state.form.partName" placeholder="部位名称" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备编码">
            <el-input v-model="state.form.equipCode" placeholder="设备编码" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备名称">
            <el-input v-model="state.form.equipName" placeholder="设备名称" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" @click="queryEquip">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider />
    <el-table
      :data="parts"
      :highlight-current-row="true"
      size="small"
      style="width: 100%"
      @row-click="invRowClick"
      @row-dblclick="invRowDbClick"
    >
      <el-table-column label="设备编码" prop="equipCode" />
      <el-table-column label="设备名称" prop="equipName" />
      <el-table-column label="部位编码" prop="partCode" />
      <el-table-column label="部位名称" prop="partName" />
    </el-table>
    <el-pagination
      background
      :current-page="paginationParams.pageNo"
      :layout="layout"
      :page-size="paginationParams.pageSize"
      :total="paginationParams.total"
      @current-change="handlePaginationCurrentChange"
      @size-change="handlePaginationSizeChange"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
  import { localStorageConfig } from '@/config/localstorage.config'
  import { getRepairPartApi } from '@/api/equip/equip_api'

  const $baseLoading = inject('$baseLoading')
  const $baseMessage = inject('$baseMessage')

  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)
  const dialogVisible = ref(false)

  const paginationParams = reactive({
    pageNum: 1,
    pageSize: 20,
    total: 0,
  })

  const state = reactive({
    form: {
      pkCorp: pkCorp,
    },
  })

  const parts = ref()

  const openDialog = () => {
    dialogVisible.value = true
  }

  const queryEquip = async () => {
    const load = $baseLoading()
    try {
      let params = {
        ...state.form,
        ...paginationParams,
      }
      const { code, msg, data } = await getRepairPartApi(params)
      if (code === 2000) {
        $baseMessage(msg, 'success')
        parts.value = data.list
        paginationParams.total = data.total
      } else {
        $baseMessage(msg, 'error')
      }
    } finally {
      load.close()
    }
  }

  const invRowDbClick = (rowData) => {
    dialogVisible.value = false
    _emit('success-callback', rowData)
  }

  //#region pagintion 开始
  const layout = ref('total, sizes, prev, pager, next, jumper')
  const handlePaginationCurrentChange = (...args) => {
    paginationParams.pageNo = args[0] ? args[0] : 1
  }
  const handlePaginationSizeChange = (...args) => {
    paginationParams.pageSize = args[0] ? args[0] : 10
    paginationParams.pageNo = 1
  }
  //#endregion pagintion 结束

  defineExpose({ openDialog })
  const _emit = defineEmits(['success-callback'])
</script>
